<template>
  <commonPage :showHeader="true">
    <scroller
      slot="page_body"
      style="height: 100%"
      ref="my_scroller"
      :on-refresh="refresh"
      :on-infinite="infinite"
      refresh-layer-color="#4b8bf4"
      loading-layer-color="#ec4949"
      class="page_body"
    >
  <!-- <commonPage :showHeader="false">
    <div
      slot="page_body"
      style="height: 100%"
      ref="my_scroller"
      refresh-layer-color="#4b8bf4"
      loading-layer-color="#ec4949"
      class="page_body"
    > -->
    <div class="all">

    <div class="top">
        <div class="top-l">
            <p>鹿城文明大脑督办系统</p>
        </div>
        <div class="top-r">
            <div class="touxiang">
               
            </div>
            <p>点位自查人</p>
        </div> 
    </div>
    <div class="tongzhi">
      <div class="tubiao">
      <img src="@/assets/img/laba.png" width="100%">
      </div>

      <div class="wenzi">
        <p>本月还有18件未自查</p>
        <p class="gray">2021-06-08</p>
      </div>
    </div>
    <div class="zicha">
      <div class="wei">
        <p>本月未自查</p>
        <p><span class="shu">18</span><span>件</span></p>
      </div>
      <div class="yi">
        <p>本月已自查</p>
        <p><span class="shu">18</span><span class="gray">件</span></p>
      </div>
      <div class="bu">
        <p>复查不合格</p>
        <p><span class="shu">18</span><span class="gray">件</span></p>
      </div>
    </div>
    <div class="yanse">
      <div class="red">
        <div class="red-Q"></div>
        <span>红色：10件</span>
      </div>
      <div class="jian"></div>
      <div class="yellow">
        <div class="yellow-Q"></div>
        <span>黄色：10件</span>
      </div>
      <div class="jian"></div>
      <div class="green">
        <div class="green-Q"></div>
        <span>绿色：10件</span>
      </div>
    </div>

    <div class="moshi">
      <div class="check_tab">
        <van-tabs 
        v-model="activeName"
        title-active-color="#0582dd"
        title-inactive-color="#36434c"
        line-width="3.5rem"
        line-height="0.1rem"
        >
          <van-tab title="地图模式" name="a">
            <div class="map">
              地图地图
            </div>
          </van-tab>
          <van-tab title="列表模式" name="b">
            <table width="96%">
              <tr>
                <td class="dw">点位</td>
                <td class="lx">点位类型</td>
                <td class="zt">自查状态</td>
                <td class="cz">操作</td>
              </tr>
              <tr v-for="(value,item) in list" :key="item">
                <td>{{value.dw}}</td>
                <td>{{value.lx}}</td>
                <td>{{value.zt}}</td>
                <td class="blue">{{value.cz}}</td>
              </tr>
            </table>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  
<!-- 
      <div class="bottom">
        <div class="d-shouye" :class="check_color==1?'checked':''" @click="check_message(1)">
          <img src="@/assets/img/d-shouye.png" height="50%">
          <p>首页</p>
        </div>
        <div class="d-duban" :class="check_color==2?'checked':''" @click="check_message(2)">
          <img src="@/assets/img/d-duban.png" height="50%">
          <p>督办</p>
        </div>
        <div class="d-xiaoxi" :class="check_color==3?'checked':''" @click="check_message(3)">
          <img src="@/assets/img/d-xiaoxi.png" height="50%">
          <p>消息</p>
        </div>
        <van-tabbar v-model="active">
          <div class="d-shouye">
            <van-tabbar-item><img src="@/assets/img/d-shouye.png" width="100%">首页</van-tabbar-item>
          </div>
          <div class="d-duban">  
            <van-tabbar-item><img src="@/assets/img/d-duban.png" width="100%">督办</van-tabbar-item>
          </div>
          <div class="d-xiaoxi">
            <van-tabbar-item><img src="@/assets/img/d-xiaoxi.png" width="100%">消息</van-tabbar-item>
          </div>        
        </van-tabbar>
      </div> -->
<!-- 
      <div class="di">
      </div> -->
    </div>
     
    </scroller>
  </commonPage>
</template>
<script>
import commonPage from "../components/common/commonPage";
export default {
  name: "duban1",
  data() {
    return {
      // active: 0,
      activeName: 'a',
      check_color:1,
      list:[
        {
          dw:"*******",
          lx:"商场",
          zt:"合格",
          cz:"查看详情",
        },{
          dw:"*******",
          lx:"公园",
          zt:"不合格",
          cz:"查看详情",
        },{
          dw:"*******",
          lx:"商场",
          zt:"合格",
          cz:"查看详情",
        },{
          dw:"*******",
          lx:"公园",
          zt:"不合格",
          cz:"查看详情",
        },{
          dw:"*******",
          lx:"商场",
          zt:"合格",
          cz:"查看详情",
        },{
          dw:"*******",
          lx:"公园",
          zt:"不合格",
          cz:"查看详情",
        },{
          dw:"*******",
          lx:"商场",
          zt:"合格",
          cz:"查看详情",
        },{
          dw:"*******",
          lx:"公园",
          zt:"不合格",
          cz:"查看详情",
        },
      ]
    };
  },
  created() {
    
  },
  components: {
    commonPage,
  },
  methods: {
    check_message: function (index) {
    this.check_color=index
    },
    
  },

};
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.all{
  width: 100%;
  position: relative;
}
.top{
  width: 92%;
  height: 2.75rem;
  display: flex;
  justify-content: space-between;
  background: white;
  line-height: 2.75rem;
  padding-left: 4%;
  padding-right: 4%;
}
.top-l{

}
.top-l > p{
  background-image: linear-gradient(#0063b3,#198de4,#57b1fd);
  -webkit-background-clip:text;
  color: transparent;

}
.top-r{
  display: flex;
}
.top-r > p{
  color: #7d8a93;
}
.touxiang{
  width: 1.2rem;
  height: 1.2rem;
  background: gray;
  border-radius: 6px;
  margin: auto 0.3rem;
}
.tongzhi{
  width: 90%;
  height: 2rem;
  background: white;
  margin: 0.75rem auto;
  border-radius: 5px;
  display: flex;
}
.tubiao{
  width: 6%;
  margin: auto 1%;
}
.wenzi{
  width: 90%;
  display: flex;
  justify-content: space-between;
  line-height: 2rem;
}
.gray{
  color: #7d8a93;
}
.zicha{
  width: 100%;
  display: flex;
  padding-left: 5%;
  padding-right: 5%;
}
.wei{
  width: 28%;
  text-align: center;
  color: white;
  background-image: linear-gradient(#89ccfe,#0064b5);
  border-radius: 7px;
  padding: 0.8rem 0;
}
.yi{
  width: 28%;
  text-align: center;
  background: white;
  margin-left: 3%;
  margin-right: 3%;
  border-radius: 7px;
  padding: 0.8rem 0;
}
.bu{
  width: 28%;
  text-align: center;
  background: white;
  border-radius: 7px;
  padding: 0.8rem 0;
}
.shu{
  font-size: 2.2rem;
  color: #1087de;
  padding-right: 0.3rem;
}
.wei > p >.shu{
  color: white;
}
.yanse{
  width: 90%;
  height: 2rem;
  background: white;
  margin: 0.75rem auto;
  border-radius: 5px;
  display: flex;
}
.red{
  width: 31%;
  display: flex;
  justify-content: center;
  line-height: 2rem;
}
.yellow{
  width: 37%; 
  display: flex;
  justify-content: center; 
  line-height: 2rem;
}
.green{
  width: 31%;
  display: flex;
  justify-content: center;
  line-height: 2rem;
}
.red-Q{
  height: 0.5rem;
  width: 0.5rem;
  background: #ff5548;
  margin: 0.75rem 0.2rem; 
  border-radius: 50%;
}
.yellow-Q{
  height: 0.5rem;
  width: 0.5rem;
  background: #ffbb22;
  margin: 0.75rem 0.2rem; 
  border-radius: 50%;
}
.green-Q{
  height: 0.5rem;
  width: 0.5rem;
  background: #82e227;
  margin: 0.75rem 0.2rem; 
  border-radius: 50%;
}
.jian{
  margin: auto 0;
  width: 0.01rem;
  height: 1rem;
  background: #7d8a93;
}
.moshi{
  width: 90%;
  padding-bottom: 0.3rem;
  background: white;
  margin: 0.75rem auto;
  border-radius: 5px;
}


.check_tab{
  width: 100%;
}
.map{
  width: 96%;
  margin: 0 auto;
}
table{
  margin: 0.5rem auto;
}
table tr:nth-child(odd){
  background: #f5f5f6;
}

td{
  text-align: center;
}
tr{
  color: #7d8a93;
}
.dw{
  width: 28%;
}
.lx{
  width: 24%;
}
.zt{
  width: 24%;
}
.cz{
  width: 24%;
}
.blue{
  color: #1087de;
}


.bottom{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3.3rem;
  display: flex;
  background: white;
}
.img{
  display: block;
}
.d-shouye,.d-duban,.d-xiaoxi{
  width: 33%;
  text-align: center;
  color: #7d8a93;
} 
.checked{
  color: #0282e0;
}

/* .van-tabbar-item{
  text-align: center;

}
.d-shouye,.d-duban,.d-xiaoxi{
  width: 33%;
} */

.di{
  width: 100%;
  height: 3.3rem;
}



</style>